<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>


<head>
    <title>用户注册</title>
    <%--<link href="../../statics/bootstrap/css/bootstrap.css" rel="stylesheet"/>--%>
    <%--<link href="../../statics/styles/navbar.css" rel="stylesheet"/>--%>
    <!--tags input-->
    <link href="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="${ctx}statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput-typeahead.css">
    <link href="${ctx}/statics/styles/typeaheadjs.css" rel="stylesheet"/>


    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/css/bootstrap-select.min.css">
    <%--<!-- bootstrapVolidator -->--%>
    <%--<link rel="stylesheet" href="${ctx}/statics/bootstrap/plugin/validator/dist/css/bootstrapValidator.css">--%>

    <script type="application/javascript">
        var errors = "${errors}";
        var basePath ="${ctx}";
        console.log(errors);
        var userType = "${userForm.userType}";
        if(userType==""||userType==undefined||userType==null){
            userType=1;
        }
    </script>

</head>

<body>


<div class="container">
    <div class="col-md-offset-2 col-md-8">
        <sf:form class="form-horizontal" role="form" action="${ctx}/register" method="post" id="userForm"
                 commandName="userForm">
            <div class="form-group">
                <label for="inputPhone" class="col-md-2 control-label"><span class="text-danger">*</span>手机号码:</label>

                <div class="col-md-4">
                    <input id="inputPhone" name="phoneNo" type="text" class="form-control" pattern="^1[0-9]{10}$" placeholder="请输入手机号码"
                         value="${userForm.phoneNo}"  data-minlength="5" data-pattern-error="请输入正确的手机号码"/>

                    <div class="help-block with-errors">
                        <sf:errors path="phoneNo" cssClass="alert alert-danger" element="div"></sf:errors>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-md-2 control-label"><span
                        class="text-danger">*</span>登录密码:</label>

                <div class="col-md-4">
                    <input id="inputPassword" name="password" type="password" class="form-control" placeholder="请输入密码"   value="${userForm.password}" />

                    <div class="help-block with-errors">
                        <sf:errors path="password" cssClass="alert alert-danger" element="div"></sf:errors>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword2" class="col-md-2 control-label"><span
                        class="text-danger">*</span>确认密码:</label>

                <div class="col-md-4">
                    <input id="inputPassword2" name="password2" type="password" class="form-control"
                           placeholder="请输入密码"   value="${userForm.password2}" />

                    <div class="help-block with-errors">
                        <sf:errors path="password2" cssClass="alert alert-danger" element="div"></sf:errors>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="col-md-2 control-label"><span class="text-danger">*</span>电子邮箱:</label>

                <div class="col-md-4">
                    <input id="inputEmail" name="email" type="email" class="form-control" placeholder="example@qq.com"   value="${userForm.email}" />

                    <div class="help-block with-errors">
                        <sf:errors path="email" cssClass="alert alert-danger" element="div"></sf:errors>
                    </div>
                </div>
            </div>

            <div class="form-group" id="userTypeRadioGroup">
                <label class="col-md-2 control-label">我是:</label>
                <label class="radio-inline">
                    <input type="radio" name="userType" value="1" title="物流公司" <c:if test="${userForm.userType==1||userForm.userType ==null}">checked</c:if>/> 物流公司
                </label>
                <label class="radio-inline">
                    <input type="radio" name="userType" value="2" title="发货方" <c:if test="${userForm.userType==2}">checked</c:if>/> 发货方
                </label>
                <label class="radio-inline">
                    <input type="radio" name="userType" value="3" title="收货方" <c:if test="${userForm.userType==3}">checked</c:if>/> 收货方
                </label>
                <label class="radio-inline">
                    <input type="radio" name="userType" value="4" title="司机" <c:if test="${userForm.userType==4}">checked</c:if>/> 司机
                </label>
                <label class="radio-inline">
                    <input type="radio" name="userType" value="5" title="其他" <c:if test="${userForm.userType==5}">checked</c:if>/> 其他
                </label>
            </div>

            <div class="form-group">
                <label class="col-md-5 control-label">你选择的注册类型是:<span class="text-danger" id="userTypeTips"><c:choose>
                    <c:when test="${userForm.userType == 1 || userForm.userType==null}">物流公司</c:when>
                    <c:when test="${userForm.userType == 2}">发货方</c:when>
                    <c:when test="${userForm.userType == 3}">收货方</c:when>
                    <c:when test="${userForm.userType == 4}">司机</c:when>
                    <c:when test="${userForm.userType == 5}">其他</c:when>
                </c:choose></span></label>

            </div>

            <div class="hide" id="divCompanyForm">
                    <div class="form-group">
                        <label for="inputCompanyLocation" class="col-md-2 control-label"><span
                                class="text-danger">*</span>公司地址:</label>

                        <div class="col-md-4">
                            <div class="input-group">
                                <input id="inputCompanyLocation" name="companyLocation.locationName" type="text" class="form-control "
                                       placeholder="如:广州" value="${userForm.companyLocation.locationName}" readonly/>
                                <input id="inputCompanyLocationHidden" name="companyLocation.locationId" type="hidden"   value="${userForm.companyLocation.locationId}" />
                                <div class="input-group-btn">
                                    <button id="btnCompanyLocation" class="btn btn-default" type="button"><span
                                            class="glyphicon glyphicon-globe"></span></button>
                                </div>
                            </div>
                            <div class="help-block with-errors">
                                <sf:errors path="companyLocation" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCompanyName" class="col-md-2 control-label"><span class="text-danger">*</span>公司名称:</label>

                        <div class="col-md-4">
                            <input id="inputCompanyName" name="companyName" type="text" class="form-control"
                                   placeholder="请按营业执照上填写" value="${userForm.companyName}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="companyName" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="inputCompanyAdress" class="col-md-2 control-label"><span class="text-danger"></span>详细地址:</label>

                        <div class="col-md-4">
                            <input id="inputCompanyAdress" name="companyAddr" type="text" class="form-control"
                                   placeholder="客户可以找到的地址" value="${userForm.companyAddr}"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCompanyContactName" class="col-md-2 control-label"><span
                                class="text-danger">*</span>联系人:</label>

                        <div class="col-md-4">
                            <input id="inputCompanyContactName" name="companyContactName" type="text"
                                   class="form-control"
                                   placeholder="你的称呼" value="${userForm.companyContactName}" />
                            <div class="help-block with-errors">
                                <sf:errors path="companyContactName" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCompanyPhone" class="col-md-2 control-label"><span class="text-danger"></span>固定电话:</label>

                        <div class="col-md-4">
                            <input id="inputCompanyPhone" name="companyContactPhoneNo" type="tel" class="form-control"
                                   placeholder="如:020-81222322"  value="${userForm.companyContactPhoneNo}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="companyContactPhoneNo" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCompanyQQ" class="col-md-2 control-label"><span class="text-danger"></span>QQ:</label>

                        <div class="col-md-4">
                            <input id="inputCompanyQQ" name="companyQQ" type="text" class="form-control" placeholder=""
                                   data-role="tagsinput"  value="${userForm.companyQQ}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="companyQQ" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sltShippingType" class="col-md-2 control-label"><span class="text-danger">*</span>运输方式:</label>

                        <div class="col-md-3">
                            <select multiple class="selectpicker" name="companyShippingTypes"
                                    id="sltShippingType"
                                    title="请选择运输方式..." data-selected-text-format="count > 2">
                                <c:forEach var="shippingType" items="${shippingTypes}">
                                    <c:if test="${shippingType.lvl==1}">
                                        <optgroup label="${shippingType.typeName}">
                                            <c:forEach var="subShippingType" items="${shippingTypes}">

                                                <c:if test="${subShippingType.lvl ==2 && subShippingType.parentId == shippingType.typeId}">
                                                    <c:set var="isSelectedSippingType" value="false"/>
                                                    <c:forEach var="selectedShippingType" items="${userForm.companyShippingTypes}" varStatus="index">
                                                        <c:if test="${subShippingType.typeId== selectedShippingType.typeId}">
                                                            <c:set var="isSelectedSippingType" value="true"/>
                                                        </c:if>
                                                    </c:forEach>
                                                    <c:choose >
                                                        <c:when test="${isSelectedSippingType==true}">
                                                            <option  value="${subShippingType.typeId}"
                                                                     title="${shippingType.typeName}-${subShippingType.typeName}" selected>${subShippingType.typeName}</option>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <option  value="${subShippingType.typeId}"
                                                                     title="${shippingType.typeName}-${subShippingType.typeName}">${subShippingType.typeName}</option>
                                                        </c:otherwise>

                                                    </c:choose>

                                                </c:if>

                                            </c:forEach>
                                        </optgroup>
                                    </c:if>
                                </c:forEach>

                            </select>
                            <div class="help-block with-errors">
                                <sf:errors path="companyShippingTypes" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputMajorLine" class="col-md-2 control-label"><span class="text-danger"></span>主营路线:</label>
                        <button id="inputMajorLineBtn" class="btn btn-default" type="button"><span
                                class="glyphicon glyphicon-globe">地图选择</span>
                        </button>
                        <div class="col-md-6">

                            <input id="inputMajorLine" name="companyMajorLines" class="form-control"
                                   placeholder="多个城市用逗号或空格分开,如:广州,佛山"  value="${userForm.companyMajorLines}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="companyMajorLines" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>

            </div>

            <!--发货用户的注册内容-->
            <div class="hide" id="divSenderForm">
                    <div class="form-group">
                        <label for="inputSenderLocation" class="col-md-2 control-label"><span
                                class="text-danger">*</span>所在地:</label>

                        <div class="col-md-4">
                            <div class="input-group">

                                <input id="inputSenderLocation" type="text" class="form-control" name="senderLocation.locationName"
                                       value="${userForm.senderLocation.locationName}" placeholder="请选择所在地.." readonly/>
                                <input id="inputSenderLocationHidden" name="senderLocation.locationId" type="hidden" value="${userForm.senderLocation.locationId}"/>
                                <div class="input-group-btn">
                                    <button id="btnSenderLocation" class="btn btn-default" type="button"><span
                                            class="glyphicon glyphicon-globe"></span></button>
                                </div>
                            </div>
                            <div class="help-block with-errors">
                                <sf:errors path="senderLocation" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputSenderName" class="col-md-2 control-label"><span class="text-danger">*</span>联系人:</label>

                        <div class="col-md-4">
                            <input id="inputSenderName" name="senderName" type="text" class="form-control"
                                   placeholder="你的称呼"  value="${userForm.senderName}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="senderName" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="inputSenderPhone" class="col-md-2 control-label"><span class="text-danger"></span>固定电话:</label>

                        <div class="col-md-4">
                            <input id="inputSenderPhone" name="senderPhoneNo" type="tel" class="form-control"
                                   placeholder="如：020-88218168"  value="${userForm.senderPhoneNo}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="senderPhoneNo" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputSenderQQ" class="col-md-2 control-label"><span
                                class="text-danger"></span>QQ:</label>

                        <div class="col-md-4">
                            <input id="inputSenderQQ" name="senderQQ" type="text" class="form-control" placeholder=""
                                   data-role="tagsinput"  value="${userForm.senderQQ}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="senderQQ" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputSenderRegularLine" class="col-md-2 control-label"><span
                                class="text-danger"></span>常发路线:</label>
                        <button id="inputSenderRegularLineBtn" class="btn btn-default" type="button"><span
                                class="glyphicon glyphicon-globe">地图选择</span>
                        </button>
                        <div class="col-md-6">
                            <input type="text" id="inputSenderRegularLine" name="senderRegularLine"
                                   class="form-control"
                                   placeholder="多个城市用逗号或空格分开,如:广州,佛山" value="${userForm.senderRegularLine}">

                            </input>
                            <div class="help-block with-errors">
                                <sf:errors path="senderRegularLine" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>

            </div>

            <!--其他用户的注册内容-->
            <div class="hide" id="divOtherForm">
                    <div class="form-group">
                        <label for="inputOtherLocation" class="col-md-2 control-label"><span
                                class="text-danger">*</span>所在地:</label>

                        <div class="col-md-4">
                            <div class="input-group">
                                <input id="inputOtherLocation"  type="text" class="form-control" name="otherLocation.locationName"
                                       placeholder=""  value="${userForm.otherLocation.locationName}" readonly/>
                                <input id="inputOtherLocationHidden" name="otherLocation.locationId" type="hidden" value="${userForm.otherLocation.locationId}"/>
                                <div class="input-group-btn">
                                    <button id="btnOtherLocation" class="btn btn-default" type="button"><span
                                            class="glyphicon glyphicon-globe"></span></button>
                                </div>
                            </div>
                            <div class="help-block with-errors">
                                <sf:errors path="otherLocation" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputOtherContactName" class="col-md-2 control-label"><span
                                class="text-danger">*</span>联系人:</label>

                        <div class="col-md-4">
                            <input id="inputOtherContactName" name="otherName" type="text" class="form-control"
                                   placeholder="你的称呼"  value="${userForm.otherName}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="otherName" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>

                    </div>

                    <div class="form-group">
                        <label for="inputOtherPhone" class="col-md-2 control-label"><span class="text-danger"></span>固定电话:</label>

                        <div class="col-md-4">
                            <input id="inputOtherPhone" name="otherPhone" type="tel" class="form-control"
                                   placeholder="如：020-88218168" value="${userForm.otherPhone}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="otherPhone" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputOtherQQ" class="col-md-2 control-label"><span
                                class="text-danger"></span>QQ:</label>

                        <div class="col-md-4">
                            <input id="inputOtherQQ" name="otherQQ" type="text" class="form-control" placeholder=""
                                   data-role="tagsinput" value="${userForm.otherQQ}"/>
                            <div class="help-block with-errors">
                                <sf:errors path="otherQQ" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="txtAreaRemark" class="col-md-2 control-label"><span
                                class="text-danger"></span>备注:</label>

                        <div class="col-md-6">
                            <textarea id="txtAreaRemark" name="otherRemark" class="form-control"
                                      placeholder="">${userForm.otherRemark}</textarea>
                            <div class="help-block with-errors">
                                <sf:errors path="otherRemark" cssClass="alert alert-danger" element="div"></sf:errors>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="form-group">

                <label class="col-md-2 control-label">验证码</label>
                <div class="col-md-4">
                    <input class="form-control" type="text" name="captchaCode"/>
                    <div class="help-block with-errors">
                        <sf:errors path="captchaCode" cssClass="alert alert-danger" element="div"></sf:errors>
                    </div>
                </div>
                <div  class="col-md-4">
                    <img src="${ctx}/jcaptcha.jpg" style="vertical-align: middle;" id="captchaImg" title="点击更换验证码" onclick="javascript:refreshCaptcha();">
                </div>

            </div>
            <div class="form-group">

                <div class="col-md-offset-2 col-md-4">

                    <button type="submit" class="btn btn-warning btn-block" id="btnRegister">提交注册</button>
                </div>
            </div>
        </sf:form>

    </div>
</div>


<!-- Large modal -->

<div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">地区选择</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="divRegionSelector"></div>
            </div>

        </div>
    </div>
</div>

<%--<script src="${ctx}/statics/js/jquery-3.1.1.min.js"></script>--%>
<%--<script src="${ctx}/statics/bootstrap/js/bootstrap.min.js"></script>--%>
<script src="${ctx}/statics/commonjs/typeahead.bundle.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.js"></script>
<%--<script src="${ctx}/statics/bootstrap/plugin/validator/dist/js/bootstrapValidator.min.js"></script>--%>
<%--<script src="${ctx}/statics/bootstrap/plugin/validator/dist/js/language/zh_CN.js"></script>--%>
<script src="${ctx}/statics/commonjs/validator.min.js"></script>
<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/regionselector.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/js/bootstrap-select.min.js"></script>
<script src="${ctx}/statics/js/register.js"></script>
<script type="application/javascript">

    function refreshCaptcha() {
        $('#captchaImg').hide().attr('src','${ctx}/jcaptcha.jpg?' + Math.floor(Math.random()*100)).fadeIn();

        //userType------------------------------------------------------------

    }
</script>
</body>

</html>